<template>
    <BaseEcharts :chatsOption="chatsOption"></BaseEcharts>
</template>

<script>
    import BaseEcharts from "../../../components/common/Cahrts/coreEcharts"

    import pieBaseConfig from "../../../echartsBaseConfig/pie"
    import {getZuowuxinxi} from "../apis"


    export default {
        components: {
            BaseEcharts
        },
        props: {
            options: {}
        },
        mounted() {
        },
        watch: {
            options: {
                handler(val) {
                    if(Array.isArray(val)){
                        this.chatsOption.series[0].data = val[0].in
                        this.chatsOption.series[1].data = val[0].out
                    }
                },
                deep: true,
                immediate: true
            }
        },

        data() {
            return {

                chatsOption: {
                    ...pieBaseConfig,
                    series: [
                        {
                            name: '销售额占比',
                            type: 'pie',
                            selectedMode: 'single',
                            radius: ["0%", '30%'],
                            center: ["50%", "60%"],
                            label: {
                                position: 'inside',
                                fontSize: 12,
                                show: false
                            },

                            labelLine: {
                                show: false
                            },
                            data: [
                                {value: 335, name: '直达', selected: true},
                                {value: 679, name: '营销广告'},
                                {value: 1548, name: '搜索引擎'}
                            ]
                        },
                        {
                            name: '销售额占比',
                            type: 'pie',
                            radius: ['50%', '72%'],
                            center: ["50%", "60%"],
                            label: {
                                position: 'outer',
                                bleedMargin: 5,
                                fontSize: 40,
                                alignTo: 'labelLine',
                            },
                            labelLine: {
                                show: true,
                                length: 0,
                                length2: 200,
                            },
                            data: [
                                {value: 335, name: '直达'},
                                {value: 310, name: '邮件营销'},
                                {value: 234, name: '联盟广告'},
                                {value: 135, name: '视频广告'},
                                {value: 1048, name: '百度'},
                                {value: 251, name: '谷歌'},
                                {value: 147, name: '必应'},
                                {value: 102, name: '其他'},
                            ]
                        }
                    ]
                }
            }
        }

    }
</script>
